<script setup lang="ts">
import { ElRow, ElCol, ElSkeleton, ElButton } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { Echart } from '@/components/Echart'
import {
  getGraphOntologyRelationApi,
  getGraphOntologyConceptApi,
  getGraphOntologyPropertyApi
} from '@/api/graph/ontology'
import { relationOptions } from './echarts-data'
import { EChartsOption } from 'echarts'
import { set } from 'lodash-es'
import { ref, reactive } from 'vue'

import type Node from 'element-plus/es/components/tree/src/model/node'
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type { NodeDropType } from 'element-plus/es/components/tree/src/tree.type'

import { TreeEditor } from '@/components/TreeEditor'

const loading = ref(true)

const relationSeriesData = reactive<EChartsOption>(relationOptions.series[0]) as EChartsOption
const relationOptionsData = reactive<EChartsOption>(relationOptions) as EChartsOption

// 本体属性
const getGraphOntologyProperties = async () => {
  const res = await getGraphOntologyPropertyApi().catch(() => {})
}

// 本体概念
const getGraphOntologyConcepts = async () => {
  const res = await getGraphOntologyConceptApi().catch(() => {})
  if (res) {
    set(
      relationSeriesData,
      'data',
      res.data.map((v) => {
        return { id: v.id, name: v.name, value: 10 }
      })
    )
  }
}

// 本体关系
const getGraphOntologyRelations = async () => {
  const res = await getGraphOntologyRelationApi().catch(() => {})
  if (res) {
    const _res: Array<any> = []
    for (let item of res!.data) {
      if (item.sourceConceptId === null || item.sourceConceptId === null) {
        continue
      }
      _res.push(item)
    }
    set(
      relationSeriesData,
      'links',
      _res.map((v) => {
        return { source: v.sourceConceptId, target: v.targetConceptId }
      })
    )
  }
}

const clickHandler = (e) => {
  console.log(e.data)
}

const getAllApi = async () => {
  await Promise.all([getGraphOntologyConcepts(), getGraphOntologyRelations()])
  loading.value = false
}

getAllApi()

const data = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1'
          }
        ]
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1'
          }
        ]
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1'
          }
        ]
      }
    ]
  }
]

const handleDrop = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, ev: DragEvents) => {
  console.log('Custom tree drop:', draggingNode.id, dropNode.label, dropType)
}
</script>

<template>
  <ElRow :span="13" justify="space-around" :style="{ 'flex-wrap': 'nowrap' }">
    <ContentWrap :title="'概念树'" shadow="hover" class="m-5px">
      <TreeEditor :data="data" @node-drop="handleDrop" />
    </ContentWrap>
    <ContentWrap :title="'本体编辑'" shadow="hover" class="m-5px">
      <p>概念1 --关系--> 概念2</p>
      <p>概念1的属性 关系的属性 概念2的属性</p>
      <p>根据已有条件筛选后的列表</p>
      <p>按钮组：取消、删除、保存、提交</p>
    </ContentWrap>
    <ContentWrap :title="'属性树'" shadow="hover" class="m-5px">
      <TreeEditor :data="data" @node-drop="handleDrop" />
    </ContentWrap>
  </ElRow>
  <ElRow :span="13" justify="space-around" :style="{ 'flex-wrap': 'nowrap' }">
    <ContentWrap :title="'方案图'" shadow="hover" class="m-5px w-full">
      <ElSkeleton :loading="loading" animated :rows="1">
        <Echart :options="relationOptions" :onclick="clickHandler" />
      </ElSkeleton>
    </ContentWrap>
  </ElRow>
</template>

<style lang="less" scoped>
.middle-wrapper {
  flex-grow: 1;
}
</style>
